// connect函数的参数：
// 参数一： 函数
// 参数二： 函数
// 返回值： 函数 （高阶组件）
import { PureComponent } from "react";
// import { store } from '../store'
import { StoreContext } from "./index";

export function myConnect(mapStateToProps, mapDispatchToProps) {

  //返回高阶组件：（本质就是函数）
  return function(WrapperComponent){
    class NewComponent extends PureComponent {  

      // 用store中共享出来的值，初始化组件state
      constructor(props, context){ 
        super(props)
        // this.state = mapStateToProps(store.getState())
        this.state = mapStateToProps(context.getState())
      }

      // 需要自己调用store.subscribe对数据进行监听，有数据就刷新一下页面
      componentDidMount() {
        this.unsubscribe = this.context.subscribe(() => {
          // this.forceUpdate()
          this.setState(mapStateToProps(this.context.getState()))
        })
      }
      // 取消监听
      componentWillUnmount() {
        this.unsubscribe()
      }

      render() {
        const stateObj = mapStateToProps(this.context.getState())
        const dispatchObj = mapDispatchToProps(this.context.dispatch)
        return <WrapperComponent {...this.props} {...stateObj} {...dispatchObj}/>
      }
    }

    NewComponent.contextType = StoreContext
    
    return NewComponent
  }
}